<template>
<!--报案登记查询页面-->
<div class="regist">
    <!--<query-conditions></query-conditions>-->
    <!-- 查询条件 -->
    <div class="query">
        <el-row :gutter="10">
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">出险时间 :</div>
            </el-col>
            <el-col :span="6">
                <el-date-picker v-model="searchConditions.damageDate" type="datetime" placeholder="选择日期时间" style="width: 98%;"></el-date-picker>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">起保日期 :</div>
            </el-col>
            <el-col :span="6">
                <el-date-picker v-model="searchConditions.startDate" type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 98%;">
                </el-date-picker>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">终保日期 :</div>
            </el-col>
            <el-col :span="6">
                <el-date-picker v-model="searchConditions.endDate" type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 98%;">
                </el-date-picker>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">机构名称 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.comCode" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">保单号 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.policyNo" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">投保人 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.appliName" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">被保险人 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.insuredName" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right" style="line-height: 18px;">被保险人证件号:</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.insuredIdentifyNumber" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right" style="line-height: 18px;">被保险人证件类型 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-select v-model="searchConditions.insuredIdentifyType" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in insuredIdentifyType" :key="item.value" :label="item.code +' ' + item.value" :value="item.code"></el-option>
                    </el-select>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 30px">
            <el-col :offset="2" :span="2">
                <div class="grid-content bg-purple">
                    <el-checkbox v-model="searchConditions.validFlag">查询有效保单</el-checkbox>
                </div>
            </el-col>
            <el-col :offset="8" :span="2" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-button type="primary" plain @click="searchAdvancedPolicy">查询</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
    <!-- 查询结果列表 -->
    <div v-show="resultOpen" class="searchResult">
        <el-table ref="multipleTable" :data="policySummaryVos.slice((currentPage-1)*pagesize,currentPage*pagesize)" tooltip-effect="dark" style="width: 100%;" @selection-change="handleSelectionChange">
            <el-table-column prop="policyNo" label="保单号" width="180px"></el-table-column>
            <el-table-column prop="riskCName" label="险种"></el-table-column>
            <el-table-column prop="comCName" label="承保机构"></el-table-column>
            <el-table-column prop="appliName" label="投保人"></el-table-column>
            <el-table-column prop="otherFlag4" label="保单状态"></el-table-column>
            <el-table-column label="起保日期">
                <template slot-scope="scope">{{ scope.row.startDate}}</template>
            </el-table-column>
            <el-table-column label="终保日期">
                <template slot-scope="scope">{{ scope.row.endDate}}</template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="registCheck(scope.row)" type="text" size="small">报案</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block mgt-10">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="policySummaryVos.length"></el-pagination>
        </div>
    </div>
</div>
</template>

<script>
import {
    insuredIdentifyType
} from "../../libs/data";
import {
    mapActions
} from "vuex";
export default {
    name: "report-register",
    props: {},
    data: function () {
        return {
            searchConditions: {
                damageDate: "",
                startDateS: "",
                startDateE: "",
                endDateS: "",
                endDateE: "",
                comCode: "",
                policyNo: "",
                appliName: "",
                insuredName: "",
                insuredIdentifyNumber: "",
                insuredIdentifyType: "",
                validFlag: true,
                endDate: "",
                startDate: ""
            },
            insuredIdentifyType: insuredIdentifyType,
            resultOpen: false,
            currentPage: 1,
            pagesize: 5,
            policySummaryVos: [],
        };
    },
    components: {
        insuredIdentifyType,
    },
    computed: {},
    watch: {},
    mounted() {},
    methods: {
        ...mapActions("registReport", ["QueryAdvancedPolicy", "yiYongCaseRegistCheck"]),
        // 报案登记 => 报案查询
        searchAdvancedPolicy() {
            this.searchConditions.validFlag = this.searchConditions.validFlag ? 1 : 0;
            // 由于日历用的这个组件v-model只能绑定一个值，所以要在这儿转化一下入参
            this.searchConditions.startDateS = this.searchConditions.startDate[0];
            this.searchConditions.startDateE = this.searchConditions.startDate[1];
            this.searchConditions.endDateS = this.searchConditions.endDate[0];
            this.searchConditions.endDateE = this.searchConditions.endDate[1];
            this.QueryAdvancedPolicy(this.searchConditions).then((result) => {
                this.resultOpen = true;
                this.policySummaryVos = result.data.policySummaryVos;
            });
            // this.$store.dispatch('registReport/QueryAdvancedPolicy', this.searchConditions)
            //     .then(result => {
            //         this.resultOpen = true;
            //     })
        },
        // 报案按钮 ==> 首先做一下报案检查
        registCheck(policy) {
            this.yiYongCaseRegistCheck().then(result => {
                if (result.data.checkFlag === "1") {
                    this.$router.push({
                        name: "reportRegist",
                        query: policy,
                    });
                }
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            this.pagesize = val;
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
    },
};
</script>

<style lang="scss" scoped>
.regist {
    padding: 20px !important;
    background: rgb(242, 242, 242);

    .query {
        padding: 10px;
        background: white;

        .el-row {
            line-height: 36px;
            margin-bottom: 10px;

            .startAndEnd {
                .el-date-editor.el-input {
                    width: 128px;
                }
            }
        }

        .el-col {
            position: relative;
        }
    }
}

.searchResult {
    margin-top: 20px;
    background: rgb(242, 242, 242);
}
</style>
